import React from 'react'
import { View } from 'react-native'
import MultiPickerMixin from './MultiPickerMixin'
import MultiPickerProps from './MultiPickerProps'

export interface MultiPickerProp {
  getValue: Function
}

const MultiPicker = (props: MultiPickerProp & MultiPickerProps) => {
  const { children, style } = props
  const selectedValue = props.getValue()
  const colElements = React.Children.map(children, (col: any, i) => {
    return React.cloneElement(col, {
      selectedValue: selectedValue[i],
      onValueChange: (...args: any[]) => props.onValueChange!(i, ...args),
    })
  })
  return <View style={style}>{colElements}</View>
}

export default MultiPickerMixin(MultiPicker)
